<template>
	<div class="wrap">
		<e-chart :options="option" style="height:100%"></e-chart>
	</div>
</template>

<script>
	export default {
		data() {
			var placeHolderStyle = {
				normal: {
					label: {
						show: false
					},
					labelLine: {
						show: false
					},
					color: "rgba(0,0,0,0)",
					borderWidth: 0
				},
				emphasis: {
					color: "rgba(0,0,0,0)",
					borderWidth: 0
				}
			};

			var dataStyle = {
				normal: {
					formatter: '{c}%',
					position: 'center',
					show: true,
					textStyle: {
						fontSize: '16',
						fontWeight: 'bold',
						color: '#fff'
					}
				}
			};
			return {
				option: {
					title: [
					{
						text: '选项1',
						left: '14%',
						top: '75%',
						textAlign: 'center',
						textStyle: {
							fontWeight: 'normal',
							fontSize: '16',
							color: '#fff',
							textAlign: 'center',
						},
					}, {
						text: '选项2',
						left: '69%',
						top: '75%',
						textAlign: 'center',
						textStyle: {
							color: '#fff',
							fontWeight: 'normal',
							fontSize: '16',
							textAlign: 'center',
						},
					}, {
						text: '选项3',
						left: '69%',
						top: '75%',
						textAlign: 'center',
						textStyle: {
							color: '#fff',
							fontWeight: 'normal',
							fontSize: '16',
							textAlign: 'center',
						},
					}
					
					],

					//第一个图表
					series: [
					    {
							type: 'pie',
							hoverAnimation: false, //鼠标经过的特效
							radius: ['75%', '60%'],
							center: ['15%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 100,
									itemStyle: {
										normal: {
											color: '#E1E8EE'
										}
									},
								}, {
									value: 35,
									itemStyle: placeHolderStyle,
								},

							]
						},
						//上层环形配置
						{
							type: 'pie',
							hoverAnimation: false, //鼠标经过的特效
							radius: ['75%', '60%'],
							center: ['15%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 75,
									itemStyle: {
										normal: {
											color: '#6F78CC'
										}
									},
									label: dataStyle,
								}, {
									value: 35,
									itemStyle: placeHolderStyle,
								},

							]
						},

						//第二个图表
						{
							type: 'pie',
							hoverAnimation: false,
							radius: ['45%', '50%'],
							center: ['70%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 100,
									itemStyle: {
										normal: {
											color: '#E1E8EE'

										}
									},

								}, {
									value: 35,
									itemStyle: placeHolderStyle,
								},

							]
						},

						//上层环形配置
						{
							type: 'pie',
							hoverAnimation: false,
							radius: ['45%', '50%'],
							center: ['70%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 30,
									itemStyle: {
										normal: {
											color: '#4897f6'
										}
									},
									label: dataStyle,
								}, {
									value: 55,
									itemStyle: placeHolderStyle,
								},

							]
						},
						
						
						//第三个图表
						{
							type: 'pie',
							hoverAnimation: false,
							radius: ['45%', '50%'],
							center: ['70%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 100,
									itemStyle: {
										normal: {
											color: '#E1E8EE'

										}
									},

								}, {
									value: 35,
									itemStyle: placeHolderStyle,
								},

							]
						},

						//上层环形配置
						{
							type: 'pie',
							hoverAnimation: false,
							radius: ['45%', '50%'],
							center: ['70%', '50%'],
							startAngle: 225,
							labelLine: {
								normal: {
									show: false
								}
							},
							label: {
								normal: {
									position: 'center'
								}
							},
							data: [{
									value: 30,
									itemStyle: {
										normal: {
											color: '#4897f6'
										}
									},
									label: dataStyle,
								}, {
									value: 55,
									itemStyle: placeHolderStyle,
								},

							]
						},						
					]
				}
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped="">
	.wrap {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>